import React, { useEffect } from "react";
import { Menu } from "antd";
import { Link, withRouter } from "react-router-dom";
import { useTranslation } from "react-i18next";

import {
  HomeOutlined,
  UserOutlined,
  UserDeleteOutlined,
  TeamOutlined,
  SettingOutlined,
  ContainerOutlined,
  PropertySafetyOutlined,
  SearchOutlined,
  SecurityScanOutlined,
  TransactionOutlined,
  SisternodeOutlined,
  TrademarkOutlined,
  PoundCircleOutlined,
  UserAddOutlined,
  WalletOutlined,
  InsuranceOutlined,
  LockOutlined,
  FundProjectionScreenOutlined,
} from "@ant-design/icons";
import { CaptureNavigationBar } from "../../utils/functionalMethod";
const { SubMenu } = Menu;
function LeftLeader(props) {
  const { history } = props;
  const { t } = useTranslation();
  const navKeep = [];
  const pathname = history.location.pathname;
  // console.log("pathname", pathname);
  navKeep.push(pathname);

  const res = CaptureNavigationBar(pathname, "/", 2);

  const router = [
    {
      title: `${t("layout.homePage")}`,
      icon: <HomeOutlined />,
      path: "/gcps-cusweb/homepage",
      key: "/gcps-cusweb/homepage",
    },
    {
      title: `${t("layout.AccountManagement")}`,
      icon: <UserOutlined />,
      path: "/gcps-cusweb/account",
      key: "/gcps-cusweb/account",
      children: [
        {
          title: `${t("layout.MyAccount")}`,
          icon: <UserDeleteOutlined />,
          path: "/gcps-cusweb/account/mine",
          key: "/gcps-cusweb/account/mine",
        },
        {
          title: `${t("layout.AccountingDetails")}`,
          icon: <ContainerOutlined />,
          path: "/gcps-cusweb/account/detailed",
          key: "/gcps-cusweb/account/detailed",
        },
        {
          title: `${t("layout.FrozenAmount")}`,
          icon: <PoundCircleOutlined />,
          path: "/gcps-cusweb/account/frozen",
          key: "/gcps-cusweb/account/frozen",
        },
        {
          title: `${t("layout.CustomerInformation")}`,
          icon: <TeamOutlined />,
          path: "/gcps-cusweb/account/customer",
          key: "/gcps-cusweb/account/customer",
        },
        // {
        //   title: "账务明细",
        //   icon: <RocketOutlined />,
        //   path: "/gcps-cusweb/user/listthree",
        //   key: "/gcps-cusweb/user/listthree",
        //   children: [
        //     {
        //       title: "订单一",
        //       icon: <ScheduleOutlined />,
        //       path: "/gcps-cusweb/user/listthree/listthreeone",
        //       key: "/gcps-cusweb/user/listthree/listthreeone",
        //     },
        //   ],
        // },
      ],
    },
    {
      title: `${t("layout.TradingCenter")}`,
      icon: <PropertySafetyOutlined />,
      path: "/gcps-cusweb/tradingcenter",
      key: "/gcps-cusweb/tradingcenter",
      children: [
        {
          title: `${t("layout.ApplicationResultQuery")}`,
          icon: <SecurityScanOutlined />,
          path: "/gcps-cusweb/tradingcenter/applyresult",
          key: "/gcps-cusweb/tradingcenter/applyresult",
        },
        {
          title: `${t("layout.TransactionResultQuery")}`,
          icon: <SearchOutlined />,
          path: "/gcps-cusweb/tradingcenter/result",
          key: "/gcps-cusweb/tradingcenter/result",
        },
      ],
    },
    {
      title: `${t("layout.GlobalPayment")}`,
      icon: <TransactionOutlined />,
      path: "/gcps-cusweb/globalpayment",
      key: "/gcps-cusweb/globalpayment",
      children: [
        {
          title: `${t("layout.Exchange")}`,
          icon: <SisternodeOutlined />,
          path: "/gcps-cusweb/globalpayment/exchange",
          key: "/gcps-cusweb/globalpayment/exchange",
        },
        {
          title: `${t("layout.GlobalPayment")}`,
          icon: <TrademarkOutlined />,
          path: "/gcps-cusweb/globalpayment/result",
          key: "/gcps-cusweb/globalpayment/result",
        },
        {
          title: `${t("layout.BatchGlobalPayment")}`,
          icon: <PoundCircleOutlined />,
          path: "/gcps-cusweb/globalpayment/allresult",
          key: "/gcps-cusweb/globalpayment/allresult",
        },
      ],
    },
    {
      title: `${t("layout.Beneficiary")}`,
      icon: <UserAddOutlined />,
      path: "/gcps-cusweb/beneficiary",
      key: "/gcps-cusweb/beneficiary",
      children: [
        {
          title: `${t("layout.BeneficiaryInformation")}`,
          icon: <WalletOutlined />,
          path: "/gcps-cusweb/beneficiary/info",
          key: "/gcps-cusweb/beneficiary/info",
        },
      ],
    },
    {
      title: `${t("layout.SetUp")}`,
      icon: <SettingOutlined />,
      path: "/gcps-cusweb/setup",
      key: "/gcps-cusweb/setup",
      children: [
        {
          title: `${t("layout.AccountPasswordSettings")}`,
          icon: <InsuranceOutlined />,
          path: "/gcps-cusweb/setup/account",
          key: "/gcps-cusweb/setup/account",
        },
        {
          title: `${t("layout.NotificationPathSetting")}`,
          icon: <FundProjectionScreenOutlined />,
          path: "/gcps-cusweb/setup/route",
          key: "/gcps-cusweb/setup/route",
        },
        // {
        //   title: `${t("layout.KeySettings")}`,
        //   icon: <LockOutlined />,
        //   path: "/gcps-cusweb/setup/secretkey",
        //   key: "/gcps-cusweb/setup/secretkey",
        // },
      ],
    },
  ];
  const renderMenuItem = ({ key, icon, title }) => {
    return (
      <Menu.Item key={key} icon={icon}>
        <Link to={key}>
          <span>{title}</span>
        </Link>
      </Menu.Item>
    );
  };

  const renderSubMenu = ({ key, icon, title, children }) => {
    return (
      <Menu.SubMenu icon={icon} key={key} title={<span>{title}</span>}>
        {children &&
          children.map((item) => {
            return item.children && item.children.length > 0
              ? renderSubMenu(item)
              : renderMenuItem(item);
          })}
      </Menu.SubMenu>
    );
  };

  return (
    <Menu mode="inline" selectedKeys={navKeep} defaultOpenKeys={[res]}>
      {router &&
        router.map((item) => {
          return item.children && item.children.length > 0
            ? renderSubMenu(item)
            : renderMenuItem(item);
        })}
    </Menu>
  );
}
LeftLeader = withRouter(LeftLeader);
export default LeftLeader;
